﻿<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        /*body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }*/

        input {
            height: 32px;
            width: 295px;
            margin-bottom: 15px;
            border: 2px solid gray;
        }

        .select-inline1 {
            width: 20%;
        }

        #r-result {
            width: 100%;
        }

        .th {
            width: 200px;
        }
    </style>
    <!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ELYtYXEH1WmDrK1wDsEWRNkGviRL0ZEo"></script>-->
    <title>单车地图搜索</title>
</head>

<body>
    <form>
        <!--<div style="width:1000px; text-align:center;  ">-->
        <span style="font-size:18px; background-color:dimgrey; line-height:30px; width:180px;   height:32px;  float:left; text-align:center; margin-left:12px; ">
            电子围栏数：

            <input name='ETotal' type="text" ng-model='TotalData.ETotal' id="ETotal" disabled="disabled" style="border:none; width:50px; background-color:dimgrey;line-height:28px;   height:28px;" />
        </span>
        <span style="font-size:18px; background-color:dimgrey; line-height:30px; width:130px;   height:32px;  float:left; text-align:center; margin-left:12px;">
            车辆数：

            <input name='ETotal' type="text" ng-model='TotalData.TotalCount' id="ETotal" disabled="disabled" style="border:none; width:50px; background-color:dimgrey;line-height:28px;   height:28px;" />
        </span>
        <span style="font-size:18px; background-color:dimgrey; line-height:30px; width:130px;   height:32px;  float:left; text-align:center; margin-left:12px; ">
            使用数：
            <input name='UserTotalCount' type="text" ng-model='TotalData.UserTotalCount' id="UserTotalCount" disabled="disabled" style="border:none; width:50px; background-color:dimgrey;line-height:28px;   height:28px;" />
        </span>
        <span style="font-size:18px; background-color:dimgrey; line-height:30px; width:140px;   height:32px;  float:left; text-align:center; margin-left:12px; ">
            空闲数:
            <input name='FreeTotalCount' type="text" ng-model='TotalData.FreeTotalCount' id="FreeTotalCount" disabled="disabled" style="border:none; width:50px; background-color:dimgrey;line-height:28px;   height:28px;" />
        </span>
        <span style="font-size:18px; background-color:dimgrey; line-height:30px; width:140px;   height:32px;  float:left; text-align:center; margin-left:12px; ">
            故障数：
            <input name='breakdownTotalCount' type="text" ng-model='TotalData.breakdownTotalCount' id="breakdownTotalCount" disabled="disabled" style="border:none; width:50px; background-color:dimgrey;line-height:28px;   height:28px;" />
        </span>
        <span style="font-size:15px; font-weight:bold;line-height:32px; height:32px; margin-left:152px;">搜索:</span>
        <!--<label class="inline pull-label s-label-len text-right" for="province" style="line-height:32px;   height:32px; margin-left:200px;">搜索:</label>-->
        <span style="line-height:32px; height:32px; ">
            <input type="text" id="keywords" name="keywords" placeholder="输入地址、围栏编号等进行搜索" /> <!--// onblur="if (this.value == '') { this.value = '输入地址、围栏编号等进行搜索' }" onfocus="if (this.value == '输入地址、围栏编号等进行搜索') { this.value = ''; this.style.color = '#737e73'; }"-->
            <input id="submitBtn" type="button" value="查询" style="width:56px;" />
            <div id="r-result"></div>
            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
            <!--查询结果(经纬度)：<input type="text"  id="result_"  />-->
            <!--<input type="button" value="查询经纬度" onclick="searchByStationName();" style="width:90px;"  />-->


        </span>

        <span id="MessAgeTitle" style="font-size:16px; color:blue; display:none;">
        </span>    

        <div style="margin-bottom:900px; height:auto;">
            <div id="allmap" style="width:1165px;  height:850px; margin:0px; padding:0px; float:left; ">
            </div>

            <div style="width:320px;  float:right; ">
                <label>位置:</label>

                <select ng-model="province" style="width:80px;" id="province" ng-options="s.ProvinceId as s.ProvinceName for s in selRegion.ProvinceData" ng-change="onChgProvince()">
                    <option value="">(请选择)</option>
                </select>
                <select ng-model="city" style="width:90px;" id="city" ng-options="s.CityId as s.CityName for s in cityData" ng-disabled="province=='' || province==null" ng-change="onChgCity()">
                    <option value="">(请选择)</option>
                </select>
                <select ng-model="District" id="District" ng-options="s.DistrictId as s.DistrictName for s in districtData" ng-disabled="city=='' || city==null">
                    <option value="">(请选择)</option>
                </select>
            </div>
            <div>
                <table ng-table="tableParams" class="table-striped table-bordered  ">
                    <thead class="panel panel-default">
                        <tr class="panel-heading">
                            <th class="th">区域</th>
                            <th class="th">电子围栏</th>
                            <th class="th">车辆</th>
                            <th class="th">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="odd gradeX" ng-repeat='item in $data'>
                            <td class="th">
                                <span>{{item.EnclosureNumber}}</span>
                            </td>
                            <td class="th">
                                <span>{{item.EnclosureDistrict}}</span>
                            </td>
                            <td class="th">
                                <span>{{item.EnclosureState}}</span>
                            </td>
                            <td class="th">
                                <a class="btn btn-default btn-xs btn-warning" ng-click="onDetail(item)"><i class="icon-info-sign"></i>查看</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </form>
</body>
</html>

<!--<script src="../lib/jquery-1.11.2.min.js"></script>-->


<script type="text/javascript">
    var lng_lat;
    var lngLatOrEnclosureNumber;
    var Type;
    var JsonData = [];
    var JsonDataBicyle = [];

    $(document).ready(function () {

        //点击查询按钮时触发
        $("#submitBtn").click(function (e) {
            //通过地址查询经纬度
            var localSearch = new BMap.LocalSearch(map);
            localSearch.enableAutoViewport(); //允许自动调节窗体大小
            var keyword = document.getElementById("keywords").value;
            if (!keyword) {
                alert("请输入关键字查询！");
                return;
            }
            alert(keyword);
            localSearch.setSearchCompleteCallback(function (searchResult) {
                //判断输入的是地址还是点在围栏编号
                var Radius = 0;
                if (keyword.indexOf('E') >= 0) //输入的是电子围栏编号
                {
                    //获取电子围栏编号，将结果显示在文本框中
                    Type = "ElecNumber"; //编号
                    lngLatOrEnclosureNumber = keyword;
                } else {
                    var poi = searchResult.getPoi(0);
                    map.centerAndZoom(poi.point, 13);
                    lng_lat = $("#result_").val();
                    Type = "address"; //地址
                    lngLatOrEnclosureNumber = poi.point.lng + "," + poi.point.lat;
                }
                alert(lngLatOrEnclosureNumber,Type);
                $.ajax({
                    //url: "http://localhost:5325/api/Electronicfence/SearchaMapElectronicListByCondition",
                    url: "http://localhost:5325/api/Electronicfence/SearchaMapElectronicListByConditionNew",
                    type: "POST",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({ 'lngLatOrEnclosureNumber': lngLatOrEnclosureNumber, 'Type': Type, 'Radius': Radius }),
                    //data: { phone: phone },
                    dataType: "json",
                    success: function (data) {

                        if (data.IsSuccess && data.ResObject != null) {
                            //循环添加电子围栏的信息
                            for (var i = 0; i < data.ResObject.Totalcount; i++) {
                                var resultData = data.ResObject.EnclosureList[i];
                                //alert(resultData.EnclosureLongitude + "," + resultData.EnclosureLatitude);
                                JsonData.push({ "CarCount": resultData.BicycleNum, point: { lat: resultData.EnclosureLatitude, lng: resultData.EnclosureLongitude } });

                                //暂时不用显示
                                //JsonData.push({ "ElecNumber": resultData.EnclosureNumber, "address": resultData.Address, point: { lat: resultData.EnclosureLatitude, lng: resultData.EnclosureLongitude } });
                            }

                            //车辆信息
                            for (var b = 0; b < data.ResObject.B_Totalcount; b++) {
                                var resultDataB = data.ResObject.BicycleList[b];
                                JsonDataBicyle.push({ point: { lat: resultDataB.BicycleLatitude, lng: resultDataB.BicycleLongitude } });

                                //暂时不用显示
                                //JsonData.push({ "ElecNumber": resultData.EnclosureNumber, "address": resultData.Address, point: { lat: resultData.EnclosureLatitude, lng: resultData.EnclosureLongitude } });
                            }

                            //initMap(); //创建和初始化地图

                            JsonDataLoad();


                        }
                    },
                    error: function (msg) {
                        alert("调用百度地图API出现异常！");
                    }
                })


            });
            localSearch.search(keyword);

        })
    });

    //测试根据地址查询经纬度
    function searchByStationName() {
        var localSearch = new BMap.LocalSearch(map);
        localSearch.enableAutoViewport(); //允许自动调节窗体大小

        var keyword = $('#keywords').val();
        localSearch.setSearchCompleteCallback(function (searchResult) {

            var poi = searchResult.getPoi(0);
            document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat; //获取经度和纬度，将结果显示在文本框中
            map.centerAndZoom(poi.point, 13);
        });
        localSearch.search(keyword);
    }

    var map = null;

    //初始化地图信息
    $(document).ready(function () {
        map = new BMap.Map("allmap");
        initMap(); //创建和初始化地图
    });


    function initMap() {
        createMap();      //创建地图
        setMapEvent();    //设置地图事件
        addMapControl();  //向地图添加控件
        //addMarker();     //添加标注

    }

    //在百度地图容器中创建一个地图
    //创建地图函数：
    function createMap() {
        map.centerAndZoom(new BMap.Point(121.48789949, 31.24916171), 14); //设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
        map.addControl(new BMap.NavigationControl());  //添加鱼骨控件
        map.addControl(new BMap.MapTypeControl());    //添加地图类型控件
        map.enableScrollWheelZoom();
        map.enableAutoResize();
        map_events_register();
        map.clearOverlays();
        get_data(new BMap.Point(121.48789949, 31.24916171)); //首次加载地图数据
    }

    //注册地图事件
    function map_events_register() {
        map.addEventListener("dragstart", map_dragstart);
        map.addEventListener("dragging", map_dragging);
        map.addEventListener("dragend", map_dragend);
    }

    //地图拖拽开始
    function map_dragstart(e) {
        var cp = map.getCenter();
        map.clearOverlays();
    }

    //地图拖动中
    function map_dragging(e)
    {
        var offsetPoint = new BMap.Pixel(e.offsetX, e.offsetY);   //记录鼠标当前点坐标
    }

    //地图拖拽结束
    function map_dragend(e) {
        var cp = map.getCenter();
        get_data(cp);
    }

    //单击地图
    function map_click(e) {
        if (e) {
            var pos = e.point;//new BMap.Point(pos.point.lng, pos.point.lat);//实例化这两个点
            map.clearOverlays();
            get_data(pos);
        }
    }

    function get_data(pos) {
        var lngLatOrEnclosureNumber = pos.lng + "," + pos.lat;
        var type = "address";    //暂时没用
        var radius = 1000;
        JsonData = [];
        JsonDataBicyle = [];
        $.ajax({
            //url: "http://localhost:5325/api/Electronicfence/SearchaMapElectronicListByCondition",
            url: "http://localhost:5325/api/Electronicfence/SearchaMapElectronicListByGEOHash",
            type: "POST",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify({ 'lngLatOrEnclosureNumber': lngLatOrEnclosureNumber, 'Type': Type, 'Radius': radius }),
            //data: { phone: phone },
            dataType: "json",
            success: function (data) {
                if (data.IsSuccess && data.ResObject != null) {
                    //循环添加电子围栏的信息
                    for (var i = 0; i < data.ResObject.Totalcount; i++) {
                        var resultData = data.ResObject.EnclosureList[i];
                        JsonData.push({ "CarCount": resultData.BicycleNum, point: { lat: resultData.EnclosureLatitude, lng: resultData.EnclosureLongitude } });
                    }

                    //车辆信息
                    for (var b = 0; b < data.ResObject.B_Totalcount; b++) {

                        var resultDataB = data.ResObject.BicycleList[b];
                        JsonDataBicyle.push({ point: { lat: resultDataB.BicycleLatitude, lng: resultDataB.BicycleLongitude } });
                    }
                    JsonDataLoad();
                }
            },
            error: function (msg) {
                alert("调用百度地图API出现异常！" + msg);
            }
        });
    }

    function JsonDataLoad() {
        message = new BMap.InfoWindow();         //弹出提示框
        //循环添加标注信息
        for (var i = 0; i < JsonData.length; i++) {
            addMarker("蓝牙信标位置", JsonData[i].CarCount, JsonData[i].point);


        }
        for (var b = 0; b < JsonDataBicyle.length; b++) {
            addMarkerB("车辆信息", JsonDataBicyle[b].point);

        }
    }

    //ip定位
    function myFun(result) {
        var cityName = result.name;
        map.setCenter(cityName);
    }
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);

    //地图事件设置函数：
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
        map.enableScrollWheelZoom(true);
        map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));// 添加缩略地图控件
    }

    //地图控件添加函数：
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
        map.addControl(ctrl_sca);
    }

    //创建图标--将标注添加到地图中
    function addMarker(title, CarCount, point) {
        //用给定的图像地址和大小创建图标对象实例   图像地址是相对于WebRoot,不需要加/,加了的话不能正确显示
        var icon = new BMap.Icon('Map/weilanIcon.png', new BMap.Size(80, 80), {
            anchor: new BMap.Size(10, 30),              //图标的定位点相对于图标左上角的偏移值
            infoWindowAnchor: new BMap.Size(10, 0)      //信息窗口开启位置相对于图标左上角的偏移值
        });
        var marker = new BMap.Marker(new BMap.Point(point.lng, point.lat), {
            icon: icon,
            offset: new BMap.Size(0, 20)
        });    //新增标注
        map.addOverlay(marker);
        marker.addEventListener("click", function () {
            showmessage(title, CarCount, new BMap.Point(point.lng, point.lat));


        });
        return marker;

    }

    //创建图标--车辆信息
    function addMarkerB(title, point) {
        //用给定的图像地址和大小创建图标对象实例   图像地址是相对于WebRoot,不需要加/,加了的话不能正确显示
        var icon = new BMap.Icon('Map/bike.png', new BMap.Size(40, 58), {
            anchor: new BMap.Size(10, 30),              //图标的定位点相对于图标左上角的偏移值
            infoWindowAnchor: new BMap.Size(10, 0)      //信息窗口开启位置相对于图标左上角的偏移值
        });
        var marker = new BMap.Marker(new BMap.Point(point.lng, point.lat), {
            icon: icon,
            offset: new BMap.Size(0, 20)
        });
        //新增标注
        map.addOverlay(marker);
        return marker;

    }

    //移除所有的标注
    function removeMarker() {
        map.clearOverlays();
    }


    //显示提示框信息
    function showmessage(title, CarCount, point) {
        message.setWidth(0);
        message.setHeight(0);
        message.redraw();   //重绘信息窗口，当信息窗口内容发生变化时进行调用
        message.setTitle(title);
        message.setContent("车辆总数：" + CarCount);

        message.disableMaximize();   //禁用窗口最大化功能
        message.enableAutoPan();     //开启打开信息窗口时地图自动平移
        map.openInfoWindow(message, point);
    }

    //显示提示框信息
    function showmessageB(title, point) {
        message.setWidth(50);
        message.setHeight(50);
        message.redraw();   //重绘信息窗口，当信息窗口内容发生变化时进行调用
        message.setTitle(title);
        message.setContent("车辆总数：12");

        message.disableMaximize();   //禁用窗口最大化功能
        message.enableAutoPan();     //开启打开信息窗口时地图自动平移
        map.openInfoWindow(message, point);
    }


    //添加圆形区域检索暂时没用
    function circle() {
        // 百度地图API功能
        var map = new BMap.Map("allmap");            // 创建Map实例
        var mPoint = new BMap.Point(121.48789949, 31.24916171);
        map.enableScrollWheelZoom();
        map.centerAndZoom(mPoint, 12);
        var circle = new BMap.Circle(mPoint, 9000, { fillColor: "blue", strokeWeight: 1, fillOpacity: 0.3, strokeOpacity: 0.3 });
        map.addOverlay(circle);

    }

    // initMap();//创建和初始化地图
    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }


    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {
            "input": "keywords",
            "location": map
        });

    ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        //setPlace();
    });

    function setPlace() {
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun() {
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }
</script>
